<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
	<head>
		<title>物业服务</title>
		<jsp:include page="../../views/layout/inc.jsp"></jsp:include>
		<link rel="stylesheet" type="text/css" href="../../css/service/jquery.bxslider.css">
		<link rel="stylesheet" type="text/css" href="../../css/service/lightbox.css">
		<script type="text/javascript" src="../../js/service/jquery.bxslider.min.js"></script>
		<script type="text/javascript" src="../../js/service/lightbox.min.js"></script>
		<script type="text/javascript" src="../../js/service/jquery.rotate.min.js"></script>
		<%-- <c:if test="${fn:contains(sessionInfo.resourceList, '/userController/editPage')}"> --%>
			<script type="text/javascript">
				$.canShow = true;
			</script>
		<%-- </c:if> --%>
		<%-- <c:if test="${fn:contains(sessionInfo.resourceList, '/userController/delete')}"> --%>
			<script type="text/javascript">
				$.canEdit = true;
			</script>
		<%-- </c:if> --%>
			<script type="text/javascript">
				$.canAdd = true;
			</script>
		<style type="text/css">
			#imgbox{
				position: fixed;
				z-index: 9990;
				width: 400px;
				height: 300px;
				top:1000px;
			}
			#closeBtn{
				cursor:pointer;
				position: absolute;
				z-index: 9991;
				top:0px;
				right: 0px;
				width:20px;
				height:20px;
			}
			.closeBtn{
				cursor:pointer;
				position: absolute;
				top:0px;
				right: 0px;
				width:20px;
				height:20px;
			}
			
			.shelter{
				/* filter:alpha(opacity=50);  
				-moz-opacity:0.5;  
				-khtml-opacity: 0.5;  
				opacity: 0.5;  
				background-color:Gray; */
				background: rgb(93,181,237); 
				background-color: rgba(93,181,237,0.5);
				-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#805DB5ED,endColorstr=#805DB5ED)"; /*Filter for IE8 */    
		     	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#805DB5ED, endColorstr=#805DB5ED); /*Filter for older IEs */
				width:100%;
				height:2000px;
				display:none;
				position:absolute;
				z-index:9999;
			}
		</style>
		<script type="text/javascript">
			var dataGrid;
			$(function() {
				dataGrid = $('#dataGrid').datagrid({
					url : '/propertyServiceController/dataGrid',
					fit : true,
					fitColumns : true,
					border : false,
					pagination : true,
					idField : 'id',
					pageSize : 10,
					pageList : [ 10, 20, 30, 40, 50 ],
					sortName : 'gmtCreate',
					sortOrder : 'desc',
					checkOnSelect : false,
					selectOnCheck : false,
					singleSelect : true,
					nowrap : false,
					frozenColumns : [ [ {
						field : 'id',
						title : '编号',
						width : 150,
						hidden : true,
						checkbox : true
					}, {
						field : 'serviceTypeName',
						title : '服务类型',
						width : 80
					} ] ],
					columns : [ [ {
						field : 'accountName',
						title : '顾客姓名',
						width : 60
					}, {
						field : 'content',
						title : '服务内容',
						width : 150
					}, {
						field : 'status',
						title : '服务状态',
						width : 150,
						formatter:function(val,rec){ 
							if(val == 0) {
								return '提交申请';
							}else if(val == 1) {
								return '处理中';
							}else if(val == 2) {
								return '处理完成';
							}
						}
					}, {
						field : 'gmtCreate',
						title : '创建时间',
						width : 150,
						sortable : true,
						formatter:function(val,rec){ 
							var unixTimestamp = new Date(val);  
		                    return unixTimestamp.format("yyyy-MM-dd hh:mm:ss");
						}
					}, {
						field : 'gmtModify',
						title : '更新时间',
						width : 150,
						sortable : true,
						formatter:function(val,rec){ 
							var unixTimestamp = new Date(val);  
		                    return unixTimestamp.format("yyyy-MM-dd hh:mm:ss");  
						}
					}, {
						field : 'action',
						title : '操作',
						width : 100,
						formatter : function(value, row, index) {
							var str = '';
							if ($.canAdd) {
								str += $.formatString('<img onclick="showAddFeedbackDlg(\'{0}\');" src="{1}" title="新增服务反馈"/>', row.id, '/images/extjs_icons/arrow/add.png');
							}
							str += '&nbsp;';
							if ($.canEdit) {
								str += $.formatString('<img onclick="showUpdateDlg(\'{0}\');" src="{1}" title="修改服务状态"/>', row.id, '/images/extjs_icons/pencil.png');
							}
							str += '&nbsp;';
							if ($.canShow) {
								str += $.formatString('<img onclick="showDlg(\'{0}\');" src="{1}" title="查看服务反馈"/>', row.id, '/images/extjs_icons/search.png');
							}
							if (row.img) {
								str += '&nbsp;';
								str += $.formatString('<img onclick="showImg(\'{0}\');" src="{1}" title="查看图片"/>', row.img, '/images/extjs_icons/folder/folder_picture.png');
							}
							return str;
						}
					} ] ],
					toolbar : '#toolbar',
					onLoadSuccess : function() {
						$('#searchForm table').show();
						parent.$.messager.progress('close');
						$(this).datagrid('tooltip');
					},
					onRowContextMenu : function(e, rowIndex, rowData) {
						e.preventDefault();
						$(this).datagrid('unselectAll').datagrid('uncheckAll');
						$(this).datagrid('selectRow', rowIndex);
					}
				});
				
				
				<c:if test="${not empty param}">
				dataGrid.datagrid('load', {"status":"${param.status}"});
				</c:if>
			});
			
			//关闭现场照片框
			function divPicClose(obj) {
				var div = $(obj).parent();
				$(div).animate({ top: '1000px' }, 'slow');
			}
			
			function showDlg(id) {
				parent.$.modalDialog({
					title : '服务反馈',
					width : 700,
					height : 400,	
					href : '/propertyServiceController/showFeedback?id=' + id
				});
			}
			
			function showImg(img) {
				$("#imgbox").html('');
				if (img) {
					$("#imgbox").html('<img id="closeBtn" title="关闭" src="../../css/service/images/close.png" onclick="divPicClose(this)" />');
					var list = img.split(",");
					var photoData = '<ul class="bxslider">';
					for(var i = 0;i < list.length;i++) {
						photoData += '<li><a href="'+ list[i] +'" rel="lightbox"><img style="width:400px ;height:300px " src="'+ list[i] +'" /></a></li>';
					}
					photoData += '</ul>';
					console.info(photoData);
					$("#imgbox").append(photoData);
					$('.bxslider').bxSlider({
						infiniteLoop: false,
						hideControlOnEnd: true,
						captions: true,
						pager:false
					});
					$("#imgbox").animate({ top: '80px',left: '300px' }, 'slow');
				}
			}
			
			function showAddFeedbackDlg(id) {
				parent.$.modalDialog({
					title : '新增服务反馈',
					width : 500,
					height : 200,
					href : '/propertyServiceController/showAddFeedbackDlg?id=' + id,
					buttons : [ {
						text : '确认新增',
						handler : function() {
							parent.$.modalDialog.openner_dataGrid = dataGrid;//因为添加成功之后，需要刷新这个dataGrid，所以先预定义好
							var f = parent.$.modalDialog.handler.find('#form');
							f.submit();
						}
					} ]
				});
			}
			
			function showUpdateDlg(id) {
				parent.$.modalDialog({
					title : '修改服务状态',
					width : 400,
					height : 150,
					href : '/propertyServiceController/editPage?id=' + id,
					buttons : [ {
						text : '确认修改',
						handler : function() {
							parent.$.modalDialog.openner_dataGrid = dataGrid;//因为添加成功之后，需要刷新这个dataGrid，所以先预定义好
							var f = parent.$.modalDialog.handler.find('#form');
							f.submit();
						}
					} ]
				});
			}
			
			function searchFun() {
				dataGrid.datagrid('load', $.serializeObject($('#searchForm')));
			}
			
			function cleanFun() {
				$('#searchForm input').val('');
				dataGrid.datagrid('load', {});
			}
		</script>
	</head>
	<body>
		<div class="easyui-layout" data-options="fit : true,border : false">
			<div data-options="region:'north',title:'查询条件',border:false" style="height: 60px; overflow: hidden;">
				<form id="searchForm">
					<table class="table table-hover table-condensed" style="display: none;">
						<tr>
							<th>创建时间</th>
							<td><input name="startCreate" id="startCreate" placeholder="点击选择时间" class="Wdate" style="width:150px" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'#F{$dp.$D(\'endCreate\') || \'%y-%M-%d\'}'})"/>
								至 <input name="endCreate" id="endCreate" placeholder="点击选择时间" class="Wdate" style="width:150px" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'#F{$dp.$D(\'startCreate\') || \'%y-%M-%d\'}'})"/></td>
						</tr>
					</table>
				</form>
			</div>
			<div data-options="region:'center',border:false">
				<table id="dataGrid"></table>
			</div>
			<div id="toolbar" style="display: none;">
				<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="searchFun();">提交查询</a>
				<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-reload',plain:true" onclick="cleanFun();">重置查询</a>
			</div>
			<div id="imgbox"></div>
		</div>
	</body>
</html>